<template>
	<view :class="currentTheme">
		<a-nabbar name="剧本详情" />
		<u-swiper height="634" :list="bannerList" @click="bannerListPreview"></u-swiper>
		<view class="u-padding-32 padding-env">
			<list-item :isImage="false" :item="item" :isList="false" :padding="16" :starSize="40"
				:collectionType="collectionType" :showTime="false">
				<view slot="footer-start" class="u-margin-top-20 u-margin-bottom-34" v-if="option.type!='game'">
					<view class="u-flex u-margin-bottom-46">
						<view class="u-flex u-row-between u-font-24 content-desc-item">
							<view class="u-flex">展会价：<money :price="item.exhibitPrice" size="36" color="#765CFE"></money></view>
							<view class="u-margin-left-60">售价：￥{{item.price || 0}}</view>
						</view>
					</view>
					<view class="u-font-24 u-margin-bottom-14 text-order-time">
						{{item.releaseTime | releaseTimeTxt}}发布时间:{{(item.releaseTime || item.time ) | dayFormat}}
					</view>
					<view class="u-font-24 u-margin-bottom-14 text-order-time">
						展会酒店地址：{{item.hotelAddress || ''}}{{item.hotelRoomNo || ''}}
					</view>
				</view>
				<view v-if="isStore&&item.isAcceptCityOutside==1&&option.type!='game'"  slot='end' class="u-margin-top-40">
					<item-btn width="100%" height="88" @click="want">
						好本无需测，直接提交意向！
					</item-btn>
				</view>
			</list-item>
			<!-- 评价 -->
			<view class="u-margin-top-20 u-margin-bottom-20">
				<item-box :padding="32">
					<view class="u-flex u-row-between">
						<view class="u-font-32">
							<text>剧本评测</text>
							<text v-if="replyListTotal>0">({{replyListTotal}}条)</text>
						</view>
						<view class="u-font-22" @click="moreReply">
							查看更多 <u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view>
						<template v-if='replyList.length'>
							<reply-item v-for="(item,index) in replyList" :key="index" :item="item"
								:showProductName="false"></reply-item>
						</template>
						<view class="u-text-center u-font-28 text-color-DEDEDE" v-else>暂无评测记录</view>
					</view>
				</item-box>
			</view>
			<template v-if="isStore">
				<view v-for="(a,i) in dataList" :key="i" @click="goPathDetail(a)" class="u-margin-top-20">
					<list-item :item="a" :isList="false" :padding="32" :isShare="false" :showStar="false"
						:showFooterRight="false" height="500">
						<view slot="content" class="u-flex u-flex-wrap content">
							<view class="u-font-24 content-desc-item u-padding-top-20">
								开放上车时间：{{item.enrollTime | timeFormat}}
							</view>
							<view class="u-font-24 content-desc-item u-padding-top-20">
								发车时间：{{item.estimateTime | timeFormat}}
							</view>
						</view>
						<view slot="footer-end" class="u-flex u-row-left u-margin-top-15">
							<view class="u-margin-right-14">
								<item-btn
									:bgColor="a.participate==a.people ? currentThemeObj.btnDisableBgcolor : currentThemeObj.primary"
									v-if="!a.isIntoCar" :disabled="a.participate==a.people"
									@click="pushCar('confirmCar',a)" width="190" height="64"
									:loading="intoCarLoading">一键上车</item-btn>
								
								<item-btn v-if="a.isIntoCar" width="190" height="64"
									@click="closeCar('storeCancelCar',a)" :loading="outCarLoading">我要下车</item-btn>
							</view>
							<view class="text-color-B0B2D8 u-font-26">{{a.participate}}/{{a.people}}人</view>
						</view>
					</list-item>
				</view>
			</template>
		</view>
		<model v-model="modelFlag" :show-title="false" :show-cancel-button="modelType!=='rejectFlag'"
			:show-confirm-button="modelType!='confirmCar'"  cancel-color="#333333" :confirm-color="currentThemeObj.primary"
			:content="closeModalTips" @confirm="confirmClose" @cancel="clearTime" />
	</view>
</template>

<script>
	import listItem from "@/components/list-item/list-item.vue"
	import {
		getDetail,
		customRequest
	} from '@/api/crud.js'
	import {
		mapGetters
	} from 'vuex'
	import dayjs from 'dayjs'
	import settlement from '@/mixins/settlement.js'
	import replyItem from '@/components/replyItem/replyItem.vue'
	import carManager from '@/mixins/carManager.js'
	import model from '@/components/u-modal/u-modal.vue'
	import price from '@/components/price/price.vue'
	export default {
		mixins: [settlement, carManager],
		components: {
			listItem,
			replyItem,
			model,
			price
		},
		data() {
			return {
				apiModule: 'shopApi',
				item: {},
				customStyle: {
					marginTop: '44rpx',
					marginBottom: '44rpx',
					backgroundColor: '#765CFE',
					borderColor: 'none'
				},
				goon: {
					backgroundColor: '#765CFE',
					borderColor: 'none'
				},
				goonDis: {
					backgroundColor: 'rgba(118,92,254,0.4)',
					borderColor: 'none'
				},
				colHeight: 0,
				replyListTotal: 0,
				replyList: [],
				dataList: [],
				option: []
			};
		},
		computed: {
			tags() {
				return this.splitStr(this.item.categoryDescription)
			},

			bannerList() {
				const img = this.splitStr(this.item.sliderImage)
				return img.map(this.imgFilter)
			},
			...mapGetters(['loginForm', 'scene']),
			userType() {
				return this.loginForm.userType || 'store'
			},
			isStore() {
				return this.userType === 'store'
			},
			collectionType() {
				let type = '';
				switch (this.option.type) {
					case 'library':
						type = 'collection'
						break;
					case 'game':
						type = 'systemStoreCollection'
						break;
					default:
						type = 'exhibitCollection'
						break;
				}
				return type
			}
		},
		onLoad(option) {
			let apiType = 'exhibitProduct';
			if (['game', 'library'].includes(option.type)) apiType = 'product'
			getDetail({
				...option,
				uid: this.loginForm.uid
			}, apiType, this.apiModule, 'thirdGet').then(data => {
				this.item = data
				this.$u.mpShare = {
					title: data.name,
					imageUrl: this.imgFilter(data.image)
				}
			})
			//获取评价列表（组局剧本评价列表  测本剧本评价列表）
			getDetail({
					productId: option.productId || option.id,
					size: 5
				}, ['game', 'library'].includes(option.type) ? 'systemStoreProductComment' : 'exhibitProductComment',
				'shopApi', 'getSystemStoreProductComments').then(data => {
				this.replyList = data.content;
				this.replyListTotal = data.totalElements
			})
			this.option = option;
			this.findCar()
		},
		onReady() {
			this.$nextTick(() => {
				this.$u.getRect('.col-image-box').then(res => {
					this.colHeight = res.width * 750 / uni.getSystemInfoSync().windowWidth - 8; //px转换成成rpx
				})
			})
		},
		methods: {
			goPathDetail(item) {
				this.$u.route({
					url: `/pagesA/goOnLarp/detail`,
					params: {
						id: item.id
					}
				})
			},
			findCar() {
				getDetail({
					productId: this.option.productId,
					uid: this.loginForm.uid
				}, 'driveCar', this.apiModule, 'findWaitRunningByProductId').then(data => {
					this.dataList = data;
				})
			},
			splitStr(str) {
				return str && str.split(',') || []
			},
			//预览
			bannerListPreview(index) {
				this.previewUrls(this.bannerList, index)
			},
			moreReply() {
				this.$u.route({
					url: "/pagesA/replyManager/replyManager",
					params: {
						label: '剧本评测',
						type: this.option.type || 'detailTestReply',
						id: this.item.productId || this.item.id
					}
				})
			},
			async want() {
				// if(!this.uid){
				// 	this.closeModalTips = '请先登录才能提交意向';
				// 	this.loginFlagFn()
				// 	return false;
				// }
				try {
					await this.loginValidate();
					await this.isBillVaildate()
					this.$u.route({
						url: '/pagesA/want/setting',
						params: {
							productId: this.item.productId,
							type: 'ob'
						}
					})
				} catch (e) {
					//TODO handle the exception
				}
			},
			cancelCarcallback(res) {
				this.findCar()
			}
		},
		filters: {
			yyyy(value) {
				return value && dayjs(value).format('YYYY-MM-DD');
			},
			releaseTimeTxt(value) {
				// 判断当前时间是不是今天之前
				if (value) {
					return dayjs(value).isAfter(dayjs()) ? '预计' : ''
				}
				return '';
			}
		},
	}
</script>

<style lang="scss" scoped>
	.padding-env {
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px)
	}

	.content {
		flex-direction: column;
		align-items: normal;
		height: 100rpx;
	}
</style>
